<template>
  <a-card :bordered="false">
    <div class="content">
        <div class="left">
           <div>
            <a-input-search v-model="searchStr" style="margin-bottom: 8px" placeholder="按设备名称查询" @change="onSearch" />
            <a-tree
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :tree-data="gData"
              :load-data="onLoadData"
              @expand="onExpand"
            >
              <template slot="title" slot-scope="{ title }">
                <span v-if="title.indexOf(searchValue) > -1">
                  {{ title.substr(0, title.indexOf(searchValue)) }}
                  <span style="color: #f50">{{ searchValue }}</span>
                  {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                </span>
                <span v-else>{{ title }}</span>
              </template>
            </a-tree>
          </div>
        </div>
        <div class="right">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="设备配方列表">
              <formulaList></formulaList>
            </a-tab-pane>
            <a-tab-pane key="2" tab="配方事件日志">
               <event-logs></event-logs>
            </a-tab-pane>
        </a-tabs>
        </div>
    </div>
  </a-card>
</template>

<script>
import formulaList from "@/pages/formula/device/file/formulaList.vue"
import eventLogs from "@/pages/formula/device/file/eventLogs"
import {getThings, getThingTypeByName} from '@/services/device'

export default {
    name: 'StepForm',
    i18n: require('./i18n'),
    components:{formulaList,eventLogs},
    data() {
        return {
            expandedKeys: [],
            searchValue: '',
            searchStr: '',
            autoExpandParent: true,
            gData: [{
              title: '所有设备',
              key: '01f313a1a7a7433ebd274ba1e58bc033'
            }],
        };
    },
    created() {
        // const that = this;
        // let filter = {};
        // let params = {};
        // let conditions = {};
        // conditions.contains = "车间";
        // filter.name = conditions;
        // params.filter = filter;
        // getThingTypeByName(params).then( res => {
        //     console.info(res);
        //     let _filter = {};
        //     let _params = {};
        //     _filter.typeId = res.data.thingTypes[0].id;
        //     _params.filter = _filter;
        //     getThings(_params).then( res => {
        //         console.info(res)
        //         res.data.things.map( item => {
        //             let obj = {};
        //             obj.title = item.name;
        //             obj.key = item.id;
        //             that.gData.push(obj);
        //         })
        //     })
        // })
    },
    methods: {
        onSearch() {
            this.searchValue = this.searchStr;
            if (this.searchValue === '') {
                this.expandedKeys = [];
            } else {
                this.expandedKeys = [];
                this.backupsExpandedKeys = [];
                const candidateKeysList = this.getkeyList(this.searchValue, this.gData, []);
                candidateKeysList.forEach(
                    (item) => {
                        const key = this.getParentKey(item, this.gData);
                        // eslint-disable-next-line no-shadow
                        if (key && !this.backupsExpandedKeys.some((item) => item === key)) this.backupsExpandedKeys.push(key);
                    },
                );
                const { length } = this.backupsExpandedKeys;
                // eslint-disable-next-line no-plusplus
                for (let i = 0; i < length; i++) {
                    this.getAllParentKey(this.backupsExpandedKeys[i], this.gData);
                }
                this.expandedKeys = this.backupsExpandedKeys.slice();
            }
        },
        // 获取节点中含有value的所有key集合
        getkeyList(value, tree, keyList) {
            // eslint-disable-next-line no-plusplus
            for (let i = 0; i < tree.length; i++) {
                const node = tree[i];
                if (node.title.indexOf(value) > -1) {
                    keyList.push(node.key);
                }
                if (node.children) {
                    this.getkeyList(value, node.children, keyList);
                }
            }
            return keyList;
        },
        // 该递归主要用于获取key的父亲节点的key值
        getParentKey(key, tree) {
            let parentKey;
            let temp;
            // eslint-disable-next-line no-plusplus
            for (let i = 0; i < tree.length; i++) {
                const node = tree[i];
                if (node.children) {
                    if (node.children.some((item) => item.key === key)) {
                        parentKey = node.key;
                        // eslint-disable-next-line no-cond-assign
                    } else if (temp = this.getParentKey(key, node.children)) {
                        parentKey = temp;
                    }
                }
            }
            return parentKey;
        },
        // 获取该节点的所有祖先节点
        getAllParentKey(key, tree) {
            let parentKey;
            if (key) {
                parentKey = this.getParentKey(key, tree);
                if (parentKey) {
                    if (!this.backupsExpandedKeys.some((item) => item === parentKey)) {
                        this.backupsExpandedKeys.push(parentKey);
                    }
                    this.getAllParentKey(parentKey, tree);
                }
            }
        },
        onLoadData(treeNode) {
            const that = this;
            return new Promise(resolve => {
                if (treeNode.dataRef.children) {
                    resolve();
                    return;
                }
                let filter = {};
                filter.parentId = treeNode.dataRef.key;
                let params = {}
                params.filter = filter;
                getThings(params).then( res => {
                    let _gData = [];
                    res.data.things.map( item => {
                        let obj = {};
                        obj.title = item.name;
                        obj.key = item.id;
                        obj.isLeaf = true;
                        _gData.push(obj);
                    })
                    treeNode.dataRef.children = _gData;
                    that.gData = [...that.gData];
                    resolve();
                })
            });
        },
        onExpand(expandedKeys) {
          this.expandedKeys = expandedKeys;
          this.autoExpandParent = false;
        },
        onChange(e) {
          const value = e.target.value;
          const expandedKeys = dataList
            .map(item => {
              if (item.title.indexOf(value) > -1) {
                return getParentKey(item.key, gData);
              }
              return null;
            })
            .filter((item, i, self) => item && self.indexOf(item) === i);
          Object.assign(this, {
            expandedKeys,
            searchValue: value,
            autoExpandParent: true,
          });
        },
    },
};
</script>

<style lang="less" scoped>
  .content{
    min-height: 700px;
    display: flex;
    flex-direction: row;
    .left{
     width: 300px;
     margin-right:20px;
     padding:10px;
    }
    .right{
     width: 100%;
     padding:10px;
    }
  }
</style>
